نکات طراحی وب

HTML برای مبتدی ها

وقتی که می خواهید یک وب سایت ایجاد کنید، اما چیزی در مورد کد HTML نمی دانید؟ خب، مطمئن باشید، تقریبا همانطور که فکر می کنید دشوار نیست. این راهنما به شما کمک خواهد کرد که شروع به کار کرده و به شما آموزش دهد که چگونه یک صفحه وب ساده شامل متن، تصاویر، پیوندهایی به صفحات دیگر وب و یک لینک ایمیل ایجاد کنید. آنچه که برای این آموزش نیاز دارید فقط یک برنامه ویرایشگر متن ساده مانند Notepad یا سایر برنامه هایی است که شما برای نوشتن متن در دستگاه خود استفاده می کنید. اگر از ویندوز استفاده می کنید، دکمه start را فشار دهید و Notepad را تایپ کنید

ابتدا خط اول صفحه وب ما را تایپ کنید:

<HTML>

سپس عبارت بعدی را تایپ کنید:

</HTML>

شما می توانید کد را با حروف بزرگ یا حروف کوچک بنویسید. مهم نیست در اینجا با حروف بزرگ تایپ شده تا خواندن آن آسان باشد. هیچ اتفاقی نیفتاده است ما فقط به مرورگرها گفته ایم که این یک سند HTML است. اولین <HTML> این است که به مرورگر بگویم که "در اینجا بخش ابتدایی بخش HTML است و ". <HTML/> به مرورگر ها می گوید: "در اینجا پایان بخش HTML است." در داخل این دو برچسب، جایی است که شما محتویات صفحه وب خود را قرار می دهید.

توجه داشته باشید که ما <HTML> و <HTML/> داریم. این چگونگی باز کردن و بستن تگ های HTML است. برچسب بسته شدن همیشه در قالب </.....> است. در بیشتر موارد، شما باید هر تگ را باز کنید.

سپس، قسمت HEAD را به صفحه وب اضافه کنید.

<HTML>
            <HEAD>
        <TITLE>صفحه اول من </TITLE>
    </HEAD>
</HTML>

به مرورگر ها می گوید که عنوان صفحه وب ما «صفحه اول من » است. این جمله در بالای پنجره مرورگر ظاهر می شود.
حالا، اولین کلمه که در مرورگر نمایش داده خواهد شد، قرار می دهیم.

<HTML>
    <HEAD>
        <TITLE>صفحه اول من </TITLE>
    </HEAD>
            <BODY>
        <H1>سلام</H1>
    </BODY>
</HTML>
<BODY>

را به مرورگر نشان می دهیم که این نقطه شروع متن سند ما است.
<H1> اشاره به هدر 1 است که بزرگترین اندازه متن است (نگاه کنید به زیر).
شما می توانید از <H1> به <H6> را امتحان کنید. اعداد مختلف به اندازه های مختلفی تولید خواهند کرد.
به عنوان مثال:

حالا اجازه دهید به سند مان بازگردیم اکنون صفحه در مرورگر به صورت زیرنمایش داده می شود.

سلام

بیایید این صفحه وب را ذخیره کنیم و آن را در مرورگر مشاهده کنیم. صفحه را با استفاده از «save as» ذخیره کنید و نام آن را هرچه دوست دارید بگذارید نام آن "mypage.htm" باشد لطفا محل فایل خود را به یاد داشته باشید. شما می توانید یک دایرکتوری جدید برای آن ایجاد کنید یا فقط به سادگی آن را در درایو C ذخیره کنید. مرورگر وب خود را باز کنید و سعی کنید فایلی که ذخیره کرده اید را باز کنید. روی 'File' کلیک کنید 'Open' و در c:\ mypage.htm یا مسیر فایل خود را تایپ کنید.
شما باید یک "سلام" بزرگ در مرورگر خود ببینید.
حالا، یک جمله را اضافه میکنیم و آن را چینش میکنیم.

<HTML>
    <HEAD>
        <TITLE>صفحه اول من </TITLE>
    </HEAD>
    <BODY>
            <H1 ALIGN="CENTER">سلام</H1>
        <P ALIGN="LEFT">این متن چپ چین است
        <P ALIGN="RIGHT">این متن راست چین است
    </BODY>
</HTML>

<P> اشاره به پاراگراف است.. <P> راه برای گفتن مرورگر برای شروع یک خط جدید است. ما ALIGN را بعد از <P> قرار داده ایم. این چیزی است که یک ویژگی، یک شاخص اختیاری نامیده می شود. بعضی از صفات نیاز به علامت نقل قول دارند، اما برخی نیازی به آن ندارند. یک قاعده ساده برای به یاد آوردن این است که علامت نقل قول ها را در هر ویژگی قرار دهید.

در این مرحله صفحه ما به شکل زیر می شود

سلام

این متن چپ چین است

این متن راست چین است

اجازه دهید یک تصویر را در صفحه وب اضافه کنیم. شما می توانید یک تصویر با استفاده از این برچسب

<IMG SRC="محل فایل تصویر" ALT="متن توضیح">

مثال زیر را ببینید.

<HTML>
    <HEAD>
        <TITLE>صفحه اول من </TITLE>
    </HEAD>
    <BODY>
        <H1 ALIGN="CENTER"> سلام </H1>
        <P ALIGN="LEFT">این متن چپ چین است
        <P ALIGN="RIGHT">این متن راست چین است
        <P ALIGN="CENTER"> <IMG SRC="images/logo.gif"></P>
    </BODY>
</HTML>

<IMG SRC="myFile.gif"> به محل فایل گرافیکی شما اشاره می کند. اگر آن را در همان پوشه وب خود قرار ندهید (آنکه ما در حال کار بر روی آن هستیم)، باید آن را به صورت متفاوتی تعریف کنید. برای مثال، آن را از هارد دیسک خود بخوانید <IMG SRC="c:\your_image_directory\image.png"> آن را از موقعیت مکانی <IMG SRC="http://www.domainName.com/image.png">
ممکن است این سوالی برای شما پیش بیاید که چگونه می توانم یک تصویر بگیرم؟ روش های مختلفی وجود دارد: استفاده از یک فایل اسکن شده از یک اسکنر، دانلود از دیگر وب سایت ها و غیره. برای استفاده از تصاویر اسکن شده، شما باید یک اسکنر خریداری کنید. سپس شما می توانید عکس های خود را اسکن کنید. برای دانلود کلیپ های تصویری رایگان، به یکی از صدها وب سایت های هنری رایگان مراجعه کنید. همانطور که قبلا گفته شد، ما یک صفحه وب ایجاد می کنیم که دارای یک لینک به مکان دیگری است، و یک بازدید کننده می تواند به شما یک ایمیل بفرستد. ما می توانیم این موارد را با استفاده از تگ لنگر

<A SRC="آدرس مقصد">
متن لینک </A>

ایجاد کنیم. مثال زیر را ببینید.

<HTML>
    <HEAD>
        <TITLE>صفحه اول من </TITLE>
    </HEAD>
    <BODY>
        <H1 ALIGN="CENTER"> سلام </H1>
        <P ALIGN="LEFT">این متن چپ چین است
        <P ALIGN="RIGHT">این متن راست چین است
        <P ALIGN="CENTER">
        <A HREF="http://www.hostseek.ir">
        <IMG SRC="images/logo.gif"></P></A>
        <A HREF="http://www.hostseek.ir">
        برای رفتن به hostseek.ir اینجا را کلیک کنید </A>
        <P ALIGN="LEFT">
        <A HREF="mailto:your@email.address">
        ایمیل من </A>
    </BODY>
</HTML>

صفحه شما اکنون به صورت زیر خواهد بود:

سلام

این متن چپ چین است

این متن راست چین است

برای رفتن به hostseek.ir اینجا را کلیک کنید
ایمیل من

این <A HREF="http://www.hostsearch.com">........ </ A> به مرورگر ها می گوید که کلمات یا تصاویر داخل را به جهت بیان شده در HREF = "..." پیوند دهد. شما می توانید از آن برای ایمیل با استفاده از mailto: your@email.address (به مثال بالا مراجعه کنید) استفاده کنید.
اکنون آموزش را به پایان رسانده ایم. شما باید این فایل را به عنوان یک فایل .htm یا .html ذخیره کنید. به سادگی با کلیک بر روی "save as" و نام آن را هر آنچه که شما می خواهید، با پایان دادن به .htm یا .html. به عنوان مثال، mypage.htm. اکنون میتوانید از مرورگرهای وب خود آن را آزمایش کنید مرورگر.خود را باز کنید، «file» را انتخاب کنید، «open» را انتخاب کنید، روی «list» یا «chose file» کلیک کنید تا mypage.htm را برای مشاهده انتخاب کنید.

2474

0 0